<template>
  <div class="mobileStep1">
    <h1>{{ logoInfo.substationName || '求礼品网' }}</h1>
    <h5>{{ logoInfo.domainName || 'qiulipin.com' }}</h5>
    <h5>赠品采购、发货、一站式服务</h5>
    <div class="lookDetail">
      <i></i>
      <span @click="goWhere('mobileStep2')">查看详情</span>
    </div>
    <img class="backgroundImg" :src="h5_1" alt="bg1">
  </div>
</template>
<script type="text/ecmascript-6">
import { mapGetters } from 'vuex'
export default {
  name: 'mobileStep1',
  computed: {
    ...mapGetters([
      'logoInfo'
    ])
  },
  data () {
    return {
      h5_1: require('@/assets/images/mobile/h5_1.png')
    }
  },
  methods: {
    goWhere (route) {
      this.$router.push({ name: route, query: this.$route.query })
    }
  }
}
</script>
<style lang="stylus" rel="stylesheet/stylus" scoped>
.mobileStep1
  transition all 0.6s
  position absolute
  top 0
  left 0
  width 100%
  height 100%
  overflow hidden
  padding-left 1.7rem
  padding-top 3.4rem
  box-sizing border-box
  .backgroundImg
    position absolute
    bottom 0
    right 0
    width calc(100% - 3.4rem)
    // width 100%
    z-index -1
  h1
    font-size 2.7rem
    color #333333
    font-weight bold
    line-height 3.8rem
  h5
    font-size 1.3rem
    line-height 1.8rem
    color #666666
    margin-bottom 0.9rem
  .lookDetail
    width 10.2rem
    height 3.2rem
    margin-top 2.5rem
    line-height 3.2rem
    border-radius 1.6rem
    box-sizing border-box
    display flex
    justify-content center
    background linear-gradient(270deg, rgba(235, 108, 162, 1) 0%, rgba(210, 58, 105, 1) 100%)
    i
      width 1.3rem
      position relative
      margin-right 0.2rem
      &:before
        content ''
        position absolute
        right 0
        top 15px
        left 0
        width 0.6rem
        height 0.6rem
        border-top 2px solid #ffffff
        border-right 2px solid #ffffff
        border-radius 1px
        transform rotate(135deg)
      &:after
        content ''
        position absolute
        right 0
        left 0
        top 8px
        width 0.6rem
        height 0.6rem
        border-top 2px solid #ffffff
        border-right 2px solid #ffffff
        border-radius 1px
        transform rotate(135deg)
    span
      font-size 1.5rem
      color #ffffff
      font-weight bold
</style>
